<template lang="pug">
el-dialog(
  :visible.sync="show"
  width="560px"
  top="5vh"
  @open="beforeOpen"
  :before-close="handleClose"
  custom-class="dialog-border"
  :close-on-click-modal="false"
)
  .modal-title(slot="title") {{title}}
  .modal-content
    .modal-content-detail(v-if="item.userId")
      .detail-item.flex
        .detail-item-label 头像：
        .detail-item-bd
          .detail-item-head(:style="item.img | filterUrl")
      .detail-item
        .detail-item-label 账号：
        .detail-item-bd
          span {{item.userName}}
      .detail-item
        .detail-item-label 性别：
        .detail-item-bd
          span(v-if="item.gender == -1 || !item.gender") 未填
          span(v-if="item.gender == 1") 男
          span(v-if="item.gender == 2") 女
      .detail-item
        .detail-item-label 用户状态：
        .detail-item-bd
          span {{item.status ? '启用' : '禁用'}}
      .detail-item
        .detail-item-label 邮箱：
        .detail-item-bd
          span {{item.mail}}
      .detail-item
        .detail-item-label 生日：
        .detail-item-bd
          span {{item.birth ? item.birth : '-'}}
      .detail-item
        .detail-item-label 所在城市：
        .detail-item-bd
          span {{item.city ? item.city : '-'}}
      .detail-item
        .detail-item-label 注册时间：
        .detail-item-bd
          span {{item.registerTime ? item.registerTime : '-' | filterDateAll}}
    .modal-content-form(v-else)
      el-form(:model="form" label-width="80px", :rules="rules" ref="ruleForm")
        el-form-item(label="账号：" prop="userName" )
          el-input(v-model="form.userName" placeholder="请输入账号")
        el-form-item(label="手机号：" prop="mobile" )
          el-input(v-model="form.mobile" placeholder="请输入手机号")
        el-form-item(label="邮箱：" prop="mail" )
          el-input(v-model="form.mail" placeholder="请输入邮箱")
      .form-warning 提示：默认初始密码手机号码
  .modal-footer(slot="footer" v-if="item.userId")
    el-button(size="small" @click="handleClose") 取消
    el-button(size="small" type="primary" @click="handleClose") 确定
  .modal-footer(v-else slot="footer")
    el-button(size="small" @click="handleClose") 取消
    el-button(size="small" type="primary" @click="confirm") 确定
</template>

<script>
import { addDesigner } from 'api'
import { hex_md5_salt } from '@/utils/md5'
export default {
  name: 'editDesignerDialog',
  props: {
    show: Boolean,
    item: Object
  },
  data () {
    return {
      title: '添加设计师用户',
      form: {
        userName: '',
        mobile: '',
        mail: '',
        password: ''
      },
      rules: {
        userName: [
          { required: true, message: '账号', trigger: 'blur' }
        ],
        mobile: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          { pattern: /^1[3|4|5|7|8|9][0-9]\d{8}$/, message: '手机号格式错误', trigger: 'blur' }
        ],
        mail: [
          { required: true, message: '请输入邮箱', trigger: 'blur' },
          { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
        ]
      }
    }
  },
  methods: {
    beforeOpen () {
      this.form = {
        userName: '',
        mobile: '',
        mail: '',
        password: ''
      }
      if (this.item.userId) this.title = '查看设计师用户'
      else this.title = '添加设计师用户'
    },
    handleClose () {
      this.$emit('close')
    },
    async confirm () {
      this.$refs.ruleForm.validate(async (valid) => {
        try {
          if (valid) {
            await this.$axios.post(addDesigner, { ...this.form, password: hex_md5_salt(encodeURIComponent(this.form.mobile)) })
            this.$message.success('添加设计师用户成功！')
            this.$emit('confirm')
          }
        } catch (err) {
          console.log(err)
          this.$message.error(err.message || err.ResultSet.errors)
        }
      })
    }
  }
} 
</script>

<style lang="scss" scoped>
.modal-title {
  font-weight: bold;
  font-size: 16px;
  line-height: 24px;
  color: #3E4373;
}
.modal-content {
  padding: 16px 0;
}
.form-warning {
  text-align: right;
  font-size: 12px;
  line-height: 20px;
  color: #FF2E42;
}
.detail-item {
  display: flex;
  align-items: center;
  margin-bottom: 24px;
  &.flex {
    align-items: flex-start;
    .detail-item-label {
      line-height: 50px;
    }
  }
  &:last-child {
    margin-bottom: 0;
  }
  .detail-item-label {
    font-size: 14px;
    line-height: 22px;
    color: #8B8EAB;
    width: 90px;
    text-align: right;
  }
  .detail-item-bd {
    margin-left: 8px;
    .detail-item-head {
      width: 80px;
      height: 80px;
      border-radius: 6px;
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      background-color: #F6F6F9;
    }
    span {
      display: inline-block;
      font-size: 14px;
      line-height: 22px;
      color: #3E4373;
    }
  }
}
</style>
